<!DOCTYPE html>
<!-- detail_days.html-->
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <title>日视图-工厂{{ factory }}</title>
</head>
<body class="container">
<!-- 菜单开始 -->
<ul class="nav nav-tabs">
    <li role="presentation"><a href="/">Home</a></li>
    <li role="presentation" class="active"><a href="/pos/{{ pos }}/day/{{ day }}/factory/{{ factory }}">日视图</a></li>
    <li role="presentation"><a href="/pos/{{ pos }}/month/{{ day }}/factory/{{ factory }}">月视图</a></li>
</ul>
<!-- 菜单结束 -->
<br/>
<div class="row">
    <div class="col-md-6">
        <span class="label label-info">工厂{{ factory }}</span>&nbsp;&nbsp{{ pos }}小时：{{ time_scope }}
    </div>
</div>
<br/>
<!-- 时间选择开始 -->
<div class="row">
    <div class="input-append date col-md-6" id="datetimepicker" data-date="{{ datetime_picker }}"
         data-date-format="yyyy-mm-dd">
        <input size="16" type="text" value="{{ datetime_picker }}" readonly>
        <span class="add-on"><i class="icon-th"></i></span>
    </div>
</div>
<!-- 时间选择结束 -->
<br/>
<div class="row">
    <div class="col-md-12">
        <table class="table table-striped">
            <tr id="header">
                <th>时间</th>
                <th>小时产量</th>
            </tr>
            {% for k,v in hours.items() %}
                <tr id="h_{{ k }}">
                    <td>{{ k }}:00</td>
                    <td>{{ v }}</td>
                </tr>
            {% endfor %}
        </table>
    </div>
</div>


<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/js/socket.min.io.js"></script>
<script>
    $(document).ready(function () {
        $("tr").click(function () {
            if (this.id === "header")
                return;
            var hour = this.id;
            $(location).attr("href", "/pos/{{ pos }}/hour/" + hour + "/{{ day }}" + "/factory/{{ factory }}");
        });
        // 日期选择
        $('#datetimepicker').datetimepicker({
            todayHighlight: 1,
            todayBtn: 1,
            minView: 2,
            autoclose: 1,
            maxView: 3
        }).on('changeDate', function (ev) {
            //alert(ev.date.valueOf());
            var timestamp = ev.date.valueOf() / 1000;
            $(location).attr("href", "/pos/{{ pos }}/day/" + timestamp + "/factory/{{ factory }}");
        });
    });
</script>

</body>
</html>
